<template>
    <div class="main-view">
        <a-card :title="$t('home')" :bordered="false">
            <a-row :gutter="16" class="stats">
                <a-col :span="8">
                    <a-statistic :title="$t('gold')" :value="gameStore.playerData.gold"/>
                </a-col>
                <a-col :span="8">
                    <a-statistic :title="$t('drawCount')" :value="gameStore.playerData.drawCount" suffix="/ 16"/>
                </a-col>
                <a-col :span="8">
                    <a-space>
                        <a-button type="primary" @click="handleDrawCard"
                                  :disabled="gameStore.playerData.drawCount <= 0">
                            {{ gameStore.playerData.drawCount > 0 ? $t('drawCard') : countdown }}
                        </a-button>
                        <a-button type="primary" @click="handleDrawMultipleCards"
                                  :disabled="gameStore.playerData.drawCount <= 0">
                            {{ $t('drawAll') }}
                        </a-button>
                    </a-space>
                </a-col>
            </a-row>
            <a-divider/>
            <h3>{{ $t('myCards') }} ({{ gameStore.playerData.cards.length }} / 10)</h3>
            <a-empty v-if="gameStore.playerData.cards.length === 0" :description="$t('noCards')"/>
            <a-row :gutter="[16, 16]" v-else>
                <a-col v-for="(cardId, index) in gameStore.playerData.cards" :key="index">
                    <a-card hoverable class="card-container">
                        <img :src="cardConfig.cards[cardId]?.image || 'https://via.placeholder.com/120x150'"
                             alt="卡片图片" class="card-image"/>
                        <div class="card-info">
                            <p class="card-title">{{ cardConfig.cards[cardId]?.name || cardId }}</p>
                            <p class="card-value">{{ cardConfig.cards[cardId]?.value || '未知' }}</p>
                        </div>
                        <a-button size="small" type="primary" @click="selectForSynthesis(cardId, index)" style="display: inline-flex;flex-direction: column;width: 100%;">
                            {{ $t('selectSynthesis') }}
                        </a-button>
                    </a-card>
                </a-col>
            </a-row>
        </a-card>
        <a-modal
            v-model:visible="drawModalVisible"
            :title="$t('drawResult')"
            :footer="null"
            :closable="true"
            :mask-closable="false"
            width="300px"
            class="draw-modal"
        >
            <div class="draw-result">
                <svg class="sun-rays" viewBox="0 0 200 200">
                    <g transform="rotate(-90 100 100)">
                        <path v-for="i in 12" :key="i" :d="`M100,100 L100,20`" :transform="`rotate(${i * 30} 100 100)`"
                              fill="none" stroke="gold" stroke-width="4"/>
                    </g>
                </svg>
                <a-card class="card-container" v-if="gameStore.newCard && !isMultipleDraw">
                    <img :src="cardConfig.cards[gameStore.newCard]?.image || 'https://via.placeholder.com/120x150'"
                         alt="新卡片" class="card-image"/>
                    <div class="card-info">
                        <p class="card-title">{{ cardConfig.cards[gameStore.newCard]?.name || gameStore.newCard }}</p>
                        <p class="card-value">{{ cardConfig.cards[gameStore.newCard]?.value || '未知' }}</p>
                    </div>
                </a-card>
                <a-row :gutter="[16, 16]" v-if="isMultipleDraw">
                    <a-col v-for="cardId in gameStore.newCards" :key="cardId" :span="12">
                        <a-card class="card-container">
                            <img :src="cardConfig.cards[cardId]?.image || 'https://via.placeholder.com/120x150'"
                                 alt="新卡片" class="card-image"/>
                            <div class="card-info">
                                <p class="card-title">{{ cardConfig.cards[cardId]?.name || cardId }}</p>
                                <p class="card-value">{{ cardConfig.cards[cardId]?.value || '未知' }}</p>
                            </div>
                        </a-card>
                    </a-col>
                </a-row>
            </div>
        </a-modal>
    </div>
</template>

<script setup>
import {onMounted, onUnmounted, ref} from 'vue'
import {useGameStore} from '../stores/game'
import cardConfig from '../config/cards.json'
import {message} from 'ant-design-vue'
import {useI18n} from 'vue-i18n'

const {t} = useI18n()
const gameStore = useGameStore()
gameStore.loadData()

const selectedCards = []
const drawModalVisible = ref(false)
const countdown = ref('')
const isMultipleDraw = ref(false)

let countdownTimer = null

const updateCountdown = () => {
    const now = Date.now()
    const lastDraw = gameStore.playerData.lastDrawTime
    const nextDraw = lastDraw + 2 * 60 * 1000
    const timeLeft = nextDraw - now
    if (timeLeft > 0 && gameStore.playerData.drawCount < 16) {
        const minutes = Math.floor(timeLeft / 60000)
        const seconds = Math.floor((timeLeft % 60000) / 1000)
        countdown.value = `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`
    } else {
        countdown.value = ''
    }
}

onMounted(() => {
    countdownTimer = setInterval(updateCountdown, 1000)
})

onUnmounted(() => {
    if (countdownTimer) {
        clearInterval(countdownTimer)
    }
})

const selectForSynthesis = (cardId, index) => {
    if (!cardConfig.cards[cardId]) {
        message.error(t('cardNotFound', {card: cardId}))
        return
    }
    if (selectedCards.length < 3) {
        selectedCards.push(cardId)
        if (selectedCards.length === 3) {
            const target = Object.values(cardConfig.cards).find(c =>
                c.from && c.from.every(id => selectedCards.includes(id))
            )
            if (target) {
                gameStore.synthesizeCard(selectedCards, target.id)
                selectedCards.length = 0
                message.success(t('synthesisSuccess'))
            } else {
                message.error(t('cannotSynthesize'))
                selectedCards.length = 0
            }
        }
    }
}

const handleDrawCard = () => {
    const cardId = gameStore.drawCard()
    if (cardId) {
        isMultipleDraw.value = false
        drawModalVisible.value = true
    }
}

const handleDrawMultipleCards = () => {
    const drawnCards = gameStore.drawMultipleCards()
    if (drawnCards.length > 0) {
        isMultipleDraw.value = true
        drawModalVisible.value = true
    }
}
</script>

<style scoped>
.main-view {
    padding: 0;
}

.stats {
    margin-bottom: 24px;
}

.card-container {
    width: 140px;
    padding: 0;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
    display: flex;
    justify-content: center;
}

.card-container:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.card-image {
    width: 100%;
    object-fit: cover;
    border-radius: 4px;
}

.card-info {
    text-align: center;
    margin-top: 4px;
}

.card-title {
    font-size: 12px;
    font-weight: bold;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-value {
    font-size: 10px;
    color: #888;
    margin: 0;
}

.draw-modal :deep(.ant-modal-content) {
    width: 300px;
    height: 300px;
    padding: 0;
}

.draw-result {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow-y: auto;
}

.sun-rays {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    transform: translate(-50%, -50%);
}
</style>